<template>
  <div id="chord-wrapper">
    
  </div>
</template>

<script>
/* eslint-disable */
import * as d3 from 'd3';
export default {
  name: 'd3-chord',
  data () {
    return {
      chartData: []
    }
  },
  mounted () {
    this.renderChart();
  },
  methods: {
    renderChart () {
      const wrapperInfo = document.getElementById('chord-wrapper')
                                  .getBoundingClientRect();
      const w = wrapperInfo.width;
      const h = wrapperInfo.height;
      console.log(wrapperInfo);
      const wrapper = d3.select('#chord-wrapper');
      const svg = wrapper.append('svg')
                          .attr('width', w)
                          .attr('height', h)
                          .attr('transform', `translate(${w >> 1}, ${h >> 1})`);
                          

      const _g = svg.append('g');
      console.log(_g);
    }
  }
}
</script>

<style lang="less" scoped>
#chord-wrapper{
  width: 100%;
  height: 100%;
}
</style>
